<template>
	<view class="search-container">
	 <NavBar :isSearch="isSearch" :parentVal="parentVal" @updataVal="parentVal = $event" @sendSearchData="sendSearchData"></NavBar>
     
	<view v-if="isShowHistory" class="search-content">
		 <!-- 没有搜索时 -->
		<view class="search-content-history" >
		 	<view class="content-text">
	 		   <text class="content-text-history">搜索历史</text>
			   <text class="content-text-empty" @click="clearHistory">清空</text>
	 	    </view>
		<!-- 搜索历史记录 -->
		    <view v-if="historList.length" class="search-content-history-list">
			    <view class="history-list-item" v-for="(item,i) in historList" :key="i"  @click="openHistoryItem(item)">{{item}}</view>
		     </view>
		<!-- 没有搜索记录 -->
		     <view v-else class="search-content-not">
			      当前没有搜索历史
		     </view>
		</view>
	 </view>
		 <!-- 搜索时 -->
		<view class="search-content-list" v-else>
			<ListItem :showloading="false" v-if="searchList.length" :ArticleList="searchList" @saveSearchHistor="saveSearchHistor"></ListItem>
			<!-- 未搜索到结果 -->
			<view v-else  class="search-content-not">
			     没有搜索到相关内容
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
	export default {
		data() {
			return {
				isSearch:true,
				searchList:[],
				parentVal:"",
				isShowHistory:true
			}
		},
		computed: {
			...mapState(['historList'])
		},
		methods: {
			...mapMutations(['setHistorList','clearHistory']),
			//发送请求获取搜索内容数据
		async	sendSearchData(){
			this.isShowHistory = false
			//用户输入空数据避免查询所有
			  if(!this.parentVal){
				  this.isShowHistory = true
				  this.searchList = []
				  return
			  }
				const res = await this.$http.get_search({searchVal : this.parentVal})
				this.searchList = res
			},
			//记录 搜索历史
			saveSearchHistor(){
				this.setHistorList(this.parentVal)
			},
			//点击搜索历史进行搜索
			openHistoryItem(item){
				this.parentVal = item;
				this.sendSearchData()
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #f8f8f8;
		display: flex;
	}
</style>

<style lang="scss" scoped>
  @import "css/search.scss";
</style>
